<template>
    <view class="personal-center">
        <!-- 顶部区域 -->
        <view class="top-section">
            <view class="avatar">
                <!-- 这里放置头像，可以根据需要进行设置 -->
                <image :src="avatar" alt="Avatar"></image>
            </view>
            <view class="nickname">
                <text>{{ nickname }}</text>
                <text @click="handleUserInfo" class="text-blue">个人信息</text>
            </view>
            <!-- 退出登录按钮 -->
            <view class="logout-button-container">
                <view class="logout-button" @click="logout">退出登录</view>
            </view>
        </view>

        <!-- 订单区域标题 -->
        <view class="order-container" v-if="userType === '01'">
            <view class="order-title">我的订单</view>

            <!-- 订单区域 -->
            <view class="order-section">
                <view class="order-feature">
                    <text @click="toWait" style="font-size: 10px;">待付款</text>
                    <uni-icons type="wallet" size="30"></uni-icons>
                </view>
                <view class="order-feature">
                    <text @click="toShip" style="font-size: 10px;">待发货</text>
                    <uni-icons type="wallet" size="30"></uni-icons>
                </view>
                <view class="order-feature">
                    <text @click="toReceive" style="font-size: 10px;">待收货</text>
                    <uni-icons type="cart-filled" size="30"></uni-icons>
                </view>
                <view class="order-feature">
                    <text @click="toAppraise" style="font-size: 10px;">待评价</text>
                    <uni-icons type="hand-up" size="30"></uni-icons>
                </view>
                <view class="order-feature">
                    <text @click="afterSales" style="font-size: 10px;">售后</text>
                    <uni-icons type="hand-up" size="30"></uni-icons>
                </view>
            </view>
        </view>
        <view v-else class="not-member-container">
            <view class="not-member-title">您还不是会员，是否加入会员？</view>
            <view class="join-member-button" @click="joinMember">是</view>
        </view>
        <!-- 中间区域 -->
        <view class="middle-section">
            <view class="feature">
                <text @click="address">收货地址</text>
                <!-- to="/address" 是收货地址页面的路由路径 -->
            </view>
            <view class="feature">
                <router-link to="/favorites">收藏</router-link>
                <!-- to="/favorites" 是收藏页面的路由路径 -->
            </view>
            <view class="feature">
                <router-link to="/history">足迹</router-link>
                <!-- to="/favorites" 是足迹页面的路由路径 -->
            </view>
        </view>
        <view class="down">
            <view class="feature feedback">
                <text>意见反馈</text>
                <uni-icons type="right" size="19" @click="feedback"></uni-icons>
            </view>
            <view class="feature contactUs">
                <text>联系我们</text>
                <uni-icons type="right" size="19" @click="contactUs"></uni-icons>
            </view>
            <view class="feature aboutUs">
                <text>关于我们</text>
                <uni-icons type="right" size="19" @click="aboutUs"></uni-icons>
            </view>
        </view>
    </view>
</template>

<script>
import config from '@/config';

export default {
    data() {
        return {
            nickname: '',
            avatar: '',
            userType: ''
        }
    },
    mounted() {
        this.getNickname();
        this.getavatar();
        this.getUsertype();
    },
    methods: {
        address() {
            uni.navigateTo({
                url: '/pages/mine/address/index',
            })
        },
        getNickname() {
            // 发送请求获取用户昵称
            uni.request({
                url: config.apiUrl + '/user/getnickname',
                method: 'GET',
                success: (res) => {
                    this.nickname = res.data;
                },
                fail: (err) => {
                    console.error('Failed to get nickname', err);
                }
            });
        },
        getavatar() {
            uni.request({
                url: config.apiUrl + '/user/getavatar',
                method: 'GET',
                success: (res) => {
                    this.avatar = res.data;
                    console.log(this.avatar)
                },
                fail: (err) => {
                    console.error('Failed to get avatar-url', err);
                }
            });
        },
        getUsertype() {
            // 发送请求获取用户类型
            uni.request({
                url: config.apiUrl + '/user/getusertype',
                method: 'GET',
                success: (res) => {
                    this.userType = res.data;
                },
                fail: (err) => {
                    console.error('Failed to get user type', err);
                }
            });
        },
        joinMember() {
            uni.navigateTo({
                url: '/pages/mine/vippayment'
            })
        },
        handleUserInfo() {
            uni.navigateTo({
                url: '/pages/mine/info/index'
            });
        },
        logout() {
            uni.reLaunch({
                url: '/pages/login'
            });
        },
        toWait() {
            console.log("212123")
            uni.navigateTo({
                url: '/pages/mine/order/waitorder'
            })
        },
        toShip() {
            console.log("212123dsfsa")
            uni.navigateTo({
                url: '/pages/mine/order/waitShip'
            })
        },
        toReceive() {
            uni.navigateTo({
                url: '/pages/mine/order/waitreceive'
            })
        },
        toAppraise() {
            uni.navigateTo({
                url: '/pages/mine/order/waitappraise'
            })
        },
        afterSales() {
            console.log("123123")
            uni.navigateTo({
                url: '/pages/mine/order/aftersales'
            })
        },
        feedback() {
            console.log("意见反馈");
            uni.navigateTo({
                url: '/pages/mine/under/feedback'
            })
        },
        contactUs() {
            console.log("联系我们")
        },
        aboutUs() {
            console.log("关于我们")
        }
    }
}
</script>

<style scoped>
    .personal-center {
        max-width: 600px;
        margin: 0 auto;
        padding: 20px;
        height: 1000px;
        background: linear-gradient(to bottom, #ffefba 0%, #ffffff 40%); /* 修改渐变背景，调整百分比 */
    }

    .top-section {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
    }

    .avatar image {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        margin-right: 10px;
    }

    .nickname {
        display: flex;
        align-items: center;
    }

    .nickname text {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 5px;
    }

    .text-blue {
        font-size: 18px; /* 调整字体大小保持一致 */
        color: #007bff; /* 修改链接颜色为蓝色 */
        text-decoration: none;
        margin-left: 20px; /* 调整左边距增加间距 */
    }

    .order-section {
        display: flex;
        margin-bottom: 20px;
        border: none;
    }

    .order-feature {
        flex: 1;
        padding: 10px;
        text-align: center;
        border: none;
        margin-right: 10px;
        cursor: pointer;
    }

    .order-feature:last-child {
        margin-right: 0;
    }

    .middle-section {
        display: flex;
    }

    .feature {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex: 1;
        padding: 10px;
        text-align: center;
        border: 1px solid #ccc;
        margin-right: 10px;
        cursor: pointer;
    }

    .feature.feedback {
        text-align: left; /* 设置文本居左 */
        border: none; /* 移除边框 */
        border-bottom: 1px solid #dcdcdc; /* 添加浅灰色下划线 */
        padding-bottom: 10px; /* 可以根据需要调整下划线与文本之间的间距 */
    }

    .feature.contactUs {
        text-align: left; /* 设置文本居左 */
        border: none; /* 移除边框 */
        border-bottom: 1px solid #dcdcdc; /* 添加浅灰色下划线 */
        padding-bottom: 10px; /* 可以根据需要调整下划线与文本之间的间距 */
    }

    .feature.aboutUs {
        text-align: left; /* 设置文本居左 */
        border: none; /* 移除边框 */
        border-bottom: 1px solid #dcdcdc; /* 添加浅灰色下划线 */
        padding-bottom: 10px; /* 可以根据需要调整下划线与文本之间的间距 */
    }

    .feature:last-child {
        margin-right: 0;
    }

    .logout-button-container {
        position: fixed;
        top: 20px; /* 调整按钮到页面顶部 */
        right: 20px; /* 调整按钮到页面右侧 */
        margin-top: -20px; /* 添加垂直间距 */
    }

    .logout-button {
        background-color: #ff4500; /* 设置按钮背景颜色 */
        color: #ffffff; /* 设置按钮文字颜色 */
        padding: 5px 10px; /* 设置按钮内边距 */
        border-radius: 5px; /* 设置按钮圆角 */
        cursor: pointer; /* 设置鼠标悬停样式 */
        font-size: 14px; /* 调整按钮字体大小 */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .order-container {
        background-color: #EAD48E; /* 设置背景颜色 */
        border-radius: 10px; /* 设置圆角 */
        padding: 20px; /* 设置内边距 */
        width: 290px;
        height: 80px;
        margin-bottom: 20px; /* 添加垂直间距 */
    }

    .order-title {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 10px;
    }

    .order-section {
        display: flex;
        justify-content: space-between;
    }

    .order-feature {
        text-align: center;
    }

    .order-feature router-link {
        display: block;
        text-decoration: none;
        font-size: 13px;
        color: #333; /* 链接文字颜色 */
    }

    .order-feature uni-icons {
        margin-bottom: 1px; /* 图标与文字间距 */
    }

    .not-member-container {
        background-color: #f5f5f5; /* 设置背景颜色 */
        border-radius: 10px; /* 设置圆角 */
        padding: 20px; /* 设置内边距 */
        width: 290px; /* 设置宽度 */
        height: 80px; /* 设置高度 */
        margin-bottom: 20px; /* 添加垂直间距 */
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .not-member-title {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 10px;
    }

    .join-member-button {
        background-color: #007bff; /* 设置按钮背景颜色 */
        color: #ffffff; /* 设置按钮文字颜色 */
        padding: 5px 10px; /* 设置按钮内边距 */
        border-radius: 5px; /* 设置按钮圆角 */
        cursor: pointer; /* 设置鼠标悬停样式 */
        font-size: 14px; /* 调整按钮字体大小 */
    }
</style>
